<template>
  <div class="bg-pc" style="height:100vh">
    <!-- <h1 v-if="isDev">enterList</h1> -->
    <!-- <pre>{{ enterList }}</pre> -->
    <div>&nbsp;</div>
    <div class="row-G20-a2">
      <div
        class="card"
        @click="enterRoomLogin(item)"
        v-for="(item, k) in enterList"
        :key="k"
      >
        <div class="img-box box-16b9">
          <img class="img-cover" :src="item.roomBgImg" :alt="item.roomName" />
        </div>
        <div :class="{ tag: true, 'bg-blue': item.isBetween }">
          {{ item.isBetween ? '直播中' : '未开播' }}
        </div>
        <div class="text-area">
          <div class="title text-overflow">
            {{ item.roomName }}
          </div>
        </div>
      </div>
    </div>
    <el-empty
      v-if="enterList.length == 0"
      description="暂无可用直播间"
    ></el-empty>
  </div>
</template>

<script>
import { bus } from '@/bus.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'enterList',
  mixins: [], //混入
  components: {}, //组件
  props: {}, //集成属性
  data() {
    return {
      isDev: process.env.NODE_ENV === 'development',
      enterList: [],
    };
  },
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations([]),
    test: function() {
      console.log('test');
    },
    formatData: function(item) {
      let _ = this._;
      let [startTimeStr, endTimeStr] = _.get(item, 'liveTime').split('-');
      let now = this.$moment(); // 当前时间
      let today = this.$moment().startOf('day'); // 今天的 00:00
      let startTime = this.$moment(today).add(
        this.$moment(startTimeStr, 'HH:mm').format('HH:mm'),
        'hours minutes'
      );
      let endTime = this.$moment(today).add(
        this.$moment(endTimeStr, 'HH:mm').format('HH:mm'),
        'hours minutes'
      );
      return {
        _id: _.get(item, 'roomId', ''),

        roomId: _.get(item, 'roomId', ''),
        roomBgImg: _.get(item, 'roomBgImg', ''),
        roomName: _.get(item, 'roomName', ''),
        videoTitleInfo: _.get(item, 'videoTitleInfo', ''),
        startTime: this.$moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
        endTime: this.$moment(endTime).format('YYYY-MM-DD HH:mm:ss'),

        isBetween: now.isBetween(startTime, endTime, '[]'), // '[]' 表示包含边界
      };
    },
    ajaxData: function() {
      let _ = this._;
      let rq = this.$route.query;
      let p = {
        androidCode: _.get(rq, 'androidCode', 'com.chenxikeji.cwp.dfqs.dev'),
        companyDepartmentId: _.get(rq, 'companyDepartmentId', '320'),
        // usersClassId: _.get(rq, 'usersClassId', ''),//没有该参数，或等通知
      };
      return this.$api
        .获取直播间list(p)
        .then((res) => {
          if (res.code == 200 && res.data) {
            this.enterList.splice(0, this.enterList.length);
            _.each(res.data, (item) => {
              this.enterList.push(this.formatData(item));
            });
          }
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
        })
        .finally((_) => {});
    },
    enterRoomLogin: function(item) {
      let _ = this._;
      let isBetween = _.get(item, 'isBetween');
      if (!isBetween) return;
      let query = this.$route.query;

      this.$router.push({
        path: '/login',
        query: Object.assign(query, { roomId: item._id }),
      });
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.ajaxData();
    let rq = this.$route.query;
    let roomId = this._.get(rq, 'roomId', false);
    if (roomId) {
      this.enterRoomLogin({ _id: roomId });
    }
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<style lang="less" scoped>
@bg-pc: #1d2125;
.bg-pc {
  background-color: @bg-pc;
  color: var(--color-text-default, #b6c2cf);

  /* 14/中-400 */
  font-family: 'PingFang SC';
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Line-Height-14, 22px); /* 157.143% */
}
.card {
  float: left;
  position: relative;
  width: 320px;
  margin-right: 8px;
  border-radius: var(--Radius-Radius-8, 8px);
  border: 1px solid var(--color-border-default, #38414a);
  overflow: hidden;
  .text-area {
    padding-left: 8px;
    padding-right: 8px;
    .title {
      font-size: 14px;
      line-height: 40px;
      height: 40px;
    }
  }
  .tag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: var(--Radius-Radius-4, 4px);
    background: var(--color-background-default-default, #38414a);

    &.bg-blue {
      background: var(--color-background-brand-default, #1d7afc);
      color: #fff;
    }
  }
}
</style>
